<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>管理员登录 - {{ site_config.get_config('site_name', 'PPress') }}</title>
    <script src="{{ url_for('static', filename='default/vendor/3.4.5') }}"></script>
    <style>
        /* Logo 样式 */
        .logo-circle {
            position: relative;
            overflow: hidden;
            transform: translateZ(0);  /* 启用硬件加速 */
            background: linear-gradient(135deg, #0180FF, #0178FF);  /* 亮色模式下的渐变 */
            border-radius:999px;
        }
        
        .logo-circle::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: linear-gradient(135deg, rgba(255,255,255,0.3) 0%, rgba(255,255,255,0) 60%);
            z-index: 1;
            border-radius: 9999px;
        }
        
        .dark .logo-circle {
            background: linear-gradient(135deg, #0180FF, #0178FF);  /* 暗色模式下的渐变 */
        }
        
        /* Logo 悬停效果 */
        .logo-circle:hover {
            transform: scale(1.05);
            box-shadow: 0 0 20px rgba(1, 128, 255, 0.6);
        }

        /* 登录页特定样式 */
        .logo-container .logo-circle {
            width: 70px;
            height: 70px;
            margin: 0 auto;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 1rem;
            transition: transform 0.3s ease;
        }

        .logo-text {
            color: white;
            font-size: 2rem;
            font-weight: bold;
            text-transform: uppercase;
            position: relative;
            z-index: 2;
        }
    </style>
</head>
<body class="bg-gray-100 dark:bg-gray-900">
    <div class="min-h-screen flex items-center justify-center py-12 px-4 sm:px-6 lg:px-8">
        <div class="max-w-md w-full">
            <!-- Logo -->
            <div class="text-center mb-8 logo-container">
                <div class="logo-circle">
                    <span class="logo-text">P</span>
                </div>
                <h2 class="text-3xl font-bold text-gray-900 dark:text-white">
                    {{ site_config.get_config('site_name', 'PPress') }}
                </h2>
                <p class="mt-2 text-sm text-gray-600 dark:text-gray-400">管理员登录</p>
            </div>

            <!-- 登录表单 -->
            <div class="bg-white dark:bg-gray-800 py-8 px-4 shadow-sm rounded-lg sm:px-10">
                <form class="space-y-6" method="POST">
                    <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
                    
                    <!-- 用户名 -->
                    <div>
                        <label for="username" class="block text-sm font-medium text-gray-700 dark:text-gray-300">
                            用户名
                        </label>
                        <div class="mt-1">
                            <input id="username" 
                                   name="username" 
                                   type="text" 
                                   required 
                                   class="appearance-none block w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm placeholder-gray-400 
                                          focus:outline-none focus:ring-blue-500 focus:border-blue-500
                                          dark:bg-gray-700 dark:text-white">
                        </div>
                    </div>

                    <!-- 密码 -->
                    <div>
                        <label for="password" class="block text-sm font-medium text-gray-700 dark:text-gray-300">
                            密码
                        </label>
                        <div class="mt-1">
                            <input id="password" 
                                   name="password" 
                                   type="password" 
                                   required 
                                   class="appearance-none block w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm placeholder-gray-400 
                                          focus:outline-none focus:ring-blue-500 focus:border-blue-500
                                          dark:bg-gray-700 dark:text-white">
                        </div>
                    </div>

                    <!-- 记住我 -->
                    <div class="flex items-center justify-between">
                        <div class="flex items-center">
                            <input id="remember" 
                                   name="remember" 
                                   type="checkbox" 
                                   class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded">
                            <label for="remember" class="ml-2 block text-sm text-gray-900 dark:text-gray-300">
                                记住我
                            </label>
                        </div>
                    </div>

                    <!-- 错误消息显示 -->
                    {% with messages = get_flashed_messages(with_categories=true) %}
                        {% if messages %}
                            {% for category, message in messages %}
                                <div class="rounded-md p-4 {% if category == 'error' %}bg-red-50 dark:bg-red-900/30 text-red-700 dark:text-red-300{% else %}bg-blue-50 dark:bg-blue-900/30 text-blue-700 dark:text-blue-300{% endif %}">
                                    <p class="text-sm">{{ message }}</p>
                                </div>
                            {% endfor %}
                        {% endif %}
                    {% endwith %}

                    <!-- 登录按钮 -->
                    <div>
                        <button type="submit" 
                                class="w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
                            登录
                        </button>
                    </div>
                </form>

                <!-- 返回前台链接 -->
                <div class="mt-6 text-center">
                    <a href="{{ url_for('blog.index') }}" class="text-sm text-blue-600 hover:text-blue-500 dark:text-blue-400 dark:hover:text-blue-300">
                        返回首页
                    </a>
                </div>
            </div>
        </div>
    </div>

    <script>
        // 检测系统暗色模式
        if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
            document.documentElement.classList.add('dark')
        }
    </script>
</body>
</html> 